<template>
  <div class="ReportCase">
    <van-nav-bar title="消息" left-arrow @click-left="onClickLeft" style="margin-bottom: 12px" />
    <div v-for="item in messageList" :key="item.informId" style="background-color: #fff">
      <van-row style="padding: 16px">
        <van-col span="4">
          <van-image width="40px" height="40px" fit="cover" :src="imgUrl" />
        </van-col>
        <van-col span="16" @click="readClick(item.informId)">
          <div style="margin-bottom: 6px; overflow: hidden;">
            <span v-if="item.readStatus * 1 === 1" style="font-size:36px; color:red; float: left; line-height:16px;">·</span>
            <span style="font-weight: bold; font-size: 14px; float:left">{{
              item.title
            }}</span>
          </div>
          <div>
            <span style="font-size: 12px; line-height: 18px">{{
              item.content
            }}</span>
          </div>
          <div>
            <span style="font-size: 12px; line-height: 18px">{{
              item.createTime
            }}</span>
          </div>
        </van-col>
      </van-row>
      <div class="van-hairline--bottom"></div>
    </div>
  </div>
</template>
  
<script>
import imgUrl from "@/images/message.png";
import { Dialog } from 'vant';
export default {
  name: "home",
  data() {
    return {
      messageList: [],
      imgUrl: imgUrl,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/personCenter");
    },
    getMessageList() {
      this.$get("/config/inform/list").then((response) => {
        this.messageList = response.rows;
      });
    },
    readClick(informId) {
      this.setRead(informId);
      this.$get("/config/inform/info", { informId }).then((response) => {
        Dialog.alert({
          title: response.data.title,
          message: response.data.content,
        }).then(() => {
          this.getMessageList()
        });
      });
    },
    setRead(informId) {
      this.$post("/config/inform/read", { informId });
    },
  },
  mounted() {
    if (localStorage.getItem('token')) {
      this.getMessageList();
    }
  },
};
</script>
<style scoped>
.ReportCase {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}
</style>
<style >
.van-dialog__message {
  text-align:left
}
</style>